<!--
 * @Author: yansheng 610363806@qq.com
 * @Date: 2024-07-26 21:07:35
 * @LastEditors: yansheng 610363806@qq.com
 * @LastEditTime: 2024-07-31 22:57:38
 * @FilePath: \cell-admin\src\pages\user\list\rebateList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-drawer
      title="结算详情"
      placement="right"
      :closable="true"
   :maskClosable='false'
    :keyboard='false'
      @close="visible = false"
      width="800"
      v-model:open="visible"
    >
      <a-table
        :row-key="(record) => record.uid"
        :loading="loading"
        :columns="columns"
        :dataSource="tableData"
        @change="handleTableChange"
        :pagination="
          isObject(pagination)
            ? {
                showQuickJumper: true,
                total: pagination.total,
                current: pagination.current,
                pageSize: pagination.pageSize,
                showTotal: (total) => `共计 ${pagination.total} 条`
              }
            : false
        "
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'User'">
            <div
              class="user-info"
              v-if="record.User && record.User.avatar"
            >
              <img
                class="user-info-avatar"
                style=""
                :src="record.User.avatar"
                alt=""
              />
              <div class="user-name">
                <div class="name">{{ record.User.user_name }}</div>
                <div class="phone">{{ record.User.phone }}</div>
              </div>
            </div>
          </template>
          <template v-if="column.dataIndex === 'deleted_at'">
            <a-tag
              color="cyan"
              v-if="record.deleted_at"
            >
              已结清
            </a-tag>
            <a-tag
              color="blue"
              v-else
            >
              未结清
            </a-tag>
          </template>
        </template>
      </a-table>
    </a-drawer>
  </div>
</template>

<script setup>
  import { rebateLogDetail } from '@/api/index.js'
  import { message } from 'ant-design-vue'

  import { isObject } from 'lodash-es'
  import { ref, defineEmits, defineExpose, defineProps, toRefs, nextTick, reactive } from 'vue'
  const showAddDialog = ref(false)
  const visible = ref(false)
  const loading = ref(false)
  const columns = [
    {
      title: 'ID',
      dataIndex: 'uid'
    },
    {
      title: '用户信息',
      dataIndex: 'User'
    },

    {
      title: '返现',
      dataIndex: 'rebate_money'
    },

    {
      title: '明细',
      dataIndex: 'remark'
    },

    {
      title: '状态',
      dataIndex: 'deleted_at'
    },
    {
      title: '创建时间',
      dataIndex: 'created_at'
    }
  ]
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0
  })

  const handleTableChange = ({ current, pageSize }) => {
    pagination.current = current
    pagination.pageSize = pageSize
    getList()
  }
  const rr_id = ref('')

  const tableData = ref([])
  const getList = () => {
    loading.value = true
    rebateLogDetail({
      rr_id: rr_id.value,
      page: pagination.current,

      pageSize: pagination.pageSize
    })
      .then((res) => {
        if (res.errorCode) {
          message.error(res.msg)
          return
        }
        tableData.value = res.data
        pagination.total = res.total
      })
      .catch((err) => {
        message.error(err.msg)
      })
      .finally(() => {
        loading.value = false
      })
  }

  const init = (row) => {
    rr_id.value = row.rr_id

    getList()
    visible.value = true
  }

  defineExpose({
    init
  })
</script>
<style scoped lang="less">
  .user-info {
    display: flex;
    align-items: center;
    justify-content: center;
    .user-info-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
</style>
